<script setup lang="ts">
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {CurrentUser} from "../models/user";
import getCurrentUser from "../states/userApi.ts";

const router = useRouter();
const user: CurrentUser = ref();
const toEdit = (editKey: string, editName: string, currentValue: string) => {
  router.push({
    path: '/user/edit',
    query: {
      "id": user.value.id,
      editKey,
      editName,
      currentValue
    }
  })
}
onMounted(async () => {
  const res = await getCurrentUser();
  if (res) {
    user.value = res;
  } else {
    router.push('/user/login')
  }
})
const getSimpleDate = (dateString: String): string => {

  if (dateString) {
    const date = new Date(dateString);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}年${month}月${day}日`;
  }
  return '';
}
</script>

<template>
  <template v-if="user">
    <van-cell title="昵称" is-link to='/user/edit' :value="user.username"
              @click="toEdit('username','昵称', user.username)"/>
    <van-cell title="账号" is-link to='/user/edit' :value="user.userAccount"
              @click="toEdit('userAccount','账号', user.userAccount)"/>
    <van-cell title="头像" is-link to='/user/edit'>
      <img style="height: 48px" :src="user.avatarUrl"/>
    </van-cell>
    <van-cell title="性别" is-link to='/user/edit' :value="user.gender===1?'男':'女'" @click="toEdit('gender','性别', user.gender)"/>
    <van-cell title="电话" is-link to='/user/edit' :value="user.phone" @click="toEdit('phone','电话', user.phone)"/>
    <van-cell title="邮箱" is-link to='/user/edit' :value="user.email" @click="toEdit('email','邮箱', user.email)"/>
    <van-cell title="星球编号" :value="user.registerCode"/>
    <van-cell title="注册时间" :value="getSimpleDate(user.createTime)"/>
  </template>

</template>

<style scoped>

</style>